<template>
 <main>
  <h1>图书管理</h1>
  <p class="d1">添加</p>
  <span>编号：</span>
  <input type="text" v-model="number">
  <span>名称：</span>
  <input type="text"  v-model="name">
  <input type="submit" @click="submit()">
  <p>图书总数：{{ arrs.length }}</p>
  <table>
    <tr>
      <th>编号</th>
      <th>名称</th>
      <th>时间</th>
      <th>操作</th>
    </tr>
    <tr v-for="(item, index) in arrs" :key="item.number">
      <td> {{ item.number}} </td>
      <td> {{ item.name}} </td>
      <td> {{ item.time}} </td>
      <td><button @click="expurgate(index)">删除</button></td>
    </tr>
  </table>
 </main>
</template>

<script setup>
import { ref } from 'vue';
//数组存取对象
let arrs = ref([
  {number:'1',name:'三国演义',time:'2050-01-12 22:19:35'},
  {number:'2',name:'水浒传',time:'2050-01-12 22:19:35'},
  {number:'3',name:'红楼梦',time:'2050-01-12 22:19:35'},
  {number:'4',name:'西游记',time:'2050-01-12 22:19:35'},
]);

let number = ref();
let name = ref('');
let time;
const submit =()=>{
  console.log(number.value);
  if(number.value==undefined || name.value==undefined){
    alert('非法数据')
  }else{
  time = new Date().toLocaleString();
  arrs.value.push({number,name,time})
  number = '';
  name = '';
  }
}
const expurgate=(index)=>{
  arrs.value.splice(index, 1);
}
</script>

<style scoped>
main{
  text-align: center;
  width: 500px;
}
main h1{
  font-weight: 600;
}
.d1{
  text-align: left;
  margin-left: 6px;
  font-weight: 600;
}
main table{ margin: 0 auto;width: 510px;}
main table th{
  font-weight: 600;
}
main input{
  margin-right: 5px;
}
</style>